<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Icon } from '@iconify/vue'

interface Module {
  id: string
  icon: string
  title: string
  description: string
  route: string
}

const modules: Module[] = [
  {
    id: 'chat',
    icon: 'mdi:chat-outline',
    title: 'AI 聊天',
    description: '多模态对话机器人，支持图片、音频等交互',
    route: '/chat'
  },
  {
    id: 'image',
    icon: 'mdi:image-plus-outline',
    title: 'AI 文生图',
    description: '生成图像内容的多模态模型',
    route: '/image-generation'
  },
  {
    id: 'rag',
    icon: 'mdi:book-open-outline',
    title: 'RAG 个人知识库',
    description: '构建个性化的知识库，支持自由对话',
    route: '/rag-knowledge-base'
  }
]

const router = useRouter()

const navigateTo = (route: string) => {
  router.push(route)
}
</script>

<template>
  <main class="home-container">
    <div class="header-section">
      <h1 class="title" @click="router.push('/')">AI 应用中心</h1>
    </div>
    
    <div class="modules-container">
      <div 
        v-for="module in modules" 
        :key="module.id"
        class="module-card"
        @click="navigateTo(module.route)"
      >
        <div class="icon-container">
          <Icon :icon="module.icon" :width="48" :height="48" />
        </div>
        <h2 class="module-title">{{ module.title }}</h2>
        <p class="module-description">{{ module.description }}</p>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.home-container {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 2rem; // 调整为更小的值以减少空白区域
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.header-section {
 cursor: pointer;
}
.modules-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  flex-grow: 1; // 确保模块容器能够填充剩余空间
}

.module-card {
  flex: 1 1 calc(33.333% - 2rem);
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  min-width: 250px;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-color: #409eff;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .modules-container {
    flex-direction: column;
    align-items: center;
  }
  
  .module-card {
    width: 100%;
    max-width: 100%;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .home-container {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .module-card {
    padding: 1.5rem;
  }
}
</style>